<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            flex-direction: column;
        }
    </style>
</head>

<body>
    <div class="all">
        <div>
            <input id="ipt" type="text" placeholder="请输入要添加的选项卡">
            <button id="add">添加</button>
        </div>
        <div id="allbtn">
            <button>全选</button>
            <button>全不选</button>
            <button>反选</button>
            <button>删除所选</button>
        </div>
        <div class="box">
            <label>
                <input class="checkbox" type="checkbox">家里没宽带
            </label>
            <label>
                <input class="checkbox" type="checkbox">网速不够快
            </label>
            <label>
                <input class="checkbox" type="checkbox">手机没流量
            </label>
            <label>
                <input class="checkbox" type="checkbox">学校无wifi
            </label>
        </div>
    </div>
    <script>
        window.onload = function () {
            let btn = document.getElementById("add"),
                allbtn = document.getElementById("allbtn"),
                box = document.getElementsByClassName("box");
            btn.onclick = function (e) {
                let ipt = document.getElementById("ipt");
                if (ipt.value == "") {
                    alert("请输入要添加的选项");
                    return;
                }
                let label = document.createElement("label");
                label.innerHTML = `<input class="checkbox" type="checkbox">${ipt.value}`;
                document.getElementsByClassName("box")[0].appendChild(label);
            };
            allbtn.onclick = function (e) {
                let value = e.target.textContent;
                let checkboxs = document.getElementsByClassName("checkbox");
                switch (value) {
                    case "全选":
                        for (let i = 0; i < checkboxs.length; i++) {
                            checkboxs[i].checked = true;
                        }
                        break;
                    case "全不选":
                        for (let i = 0; i < checkboxs.length; i++) {
                            checkboxs[i].checked = false;
                        }
                        break;
                    case "反选":
                        for (let i = 0; i < checkboxs.length; i++) {
                            checkboxs[i].checked = !checkboxs[i].checked;
                        }
                        break;
                    case "删除所选":
                        for (let i = 0; i < checkboxs.length; i++) {
                            if (checkboxs[i].checked == true) {
                                checkboxs[i].parentNode.remove();
                                i--;
                            }
                        }
                        break;
                }
            };
        }
    </script>
</body>

</html>